<template>
  <!--- 上报缺陷 -->
  <view>
    <view class="container">
      <uni-forms ref="form" :modelValue="formData" labelWidth="120px" labelPosition="top">
        <view class="background-white bor-top">
          <uni-forms-item name="name" label="缺陷项">
            <textarea v-model="formData.name" class="text-area" placeholder="根据实际情况填写(限20字)" maxlength="20" />
          </uni-forms-item>
        </view>
        <view class="background-white bor-top">
          <uni-forms-item name="location" label="缺陷位置">
            <textarea
              v-model="formData.location"
              class="text-area"
              placeholder="根据实际情况填写(限20字)"
              :maxlength="20"
            />
          </uni-forms-item>
        </view>
        <view class="background-white bor-top">
          <uni-forms-item name="content" label="缺陷内容">
            <textarea
              v-model="formData.content"
              class="text-area"
              placeholder="根据实际情况填写(限20字)"
              maxlength="20"
            />
          </uni-forms-item>
        </view>
        <cu-cell-group>
          <uni-forms-item name="type">
            <cu-cell
              title="缺陷类型"
              required
              link
              placeholder="请选择"
              style="border-top: 1px solid rgba(213, 215, 227, 0.3)"
              :description="managerTypeLabel"
              @click="managerTypeClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="level">
            <cu-cell
              title="缺陷级别"
              required
              link
              placeholder="请选择"
              :description="managerLevelLabel"
              @click="managerLevelClick()"
            ></cu-cell>
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>

      <dict-picker ref="managerTypeDict" title="缺陷类型" dictType="dfm_defect_type" @confirm="manageTypeOnConfirm">
      </dict-picker>
      <dict-picker ref="managerLevelDict" title="缺陷级别" dictType="dfm_defect_level" @confirm="manageLevelOnConfirm">
      </dict-picker>
    </view>
    <view class="submit-group">
      <button class="u-button" type="primary" :ripple="true" @click="submit">上报</button>
    </view>
  </view>
</template>

<script>
import { addDefect } from '@/api/equipment/standingBook.js'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DictPicker from '@/components/dict-picker/index.vue'
export default {
  components: {
    CuCellGroup,
    CuCell,
    DictPicker
  },
  data() {
    return {
      formData: {
        name: '',
        type: '',
        level: '',
        content: '',
        location: ''
      },
      managerTypeLabel: '',
      managerLevelLabel: '',
      rules: {
        type: {
          rules: [
            {
              required: true,
              errorMessage: '缺陷类型不能为空'
            }
          ]
        },
        level: {
          rules: [
            {
              required: true,
              errorMessage: '缺陷级别不能为空'
            }
          ]
        },
        name: {
          rules: [
            {
              required: true,
              errorMessage: '缺陷项不能为空'
            }
          ]
        },
        content: {
          rules: [
            {
              required: true,
              errorMessage: '缺陷内容不能为空'
            }
          ]
        },
        location: {
          rules: [
            {
              required: true,
              errorMessage: '缺陷位置不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad() {},
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  beforeDestroy() {},
  methods: {
    navigateBack() {
      uni.navigateBack()
    },

    managerTypeClick() {
      this.$refs.managerTypeDict.open()
    },
    manageTypeOnConfirm(obj) {
      this.managerTypeLabel = obj.name
      this.formData.type = obj.value
    },
    managerLevelClick() {
      this.$refs.managerLevelDict.open()
    },
    manageLevelOnConfirm(obj) {
      this.managerLevelLabel = obj.name
      this.formData.level = obj.value
    },

    submit() {
      this.$refs.form.validate().then((res) => {
        this.$modal.confirm('确定上报缺陷？').then(() => {
          addDefect(this.formData).then((res) => {
            this.$modal.showToast('上报成功')
            // 调用正常接口
            this.checkNormal()
          })
        })
      })
    },
    checkNormal() {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:success')
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 120px;
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 30px;
}

.u-button {
  width: 600rpx;
}
</style>
